<template>
  <div class="recovery-progress">
    <div class="progress-header">
      <div class="progress-title">
        <el-icon>
          <Loading />
        </el-icon>
        <span>{{ title }}</span>
      </div>
      <el-button type="text" @click="$emit('cancel')" :icon="Close" size="small" v-if="showCancel">
        取消
      </el-button>
    </div>

    <el-progress :percentage="percentage" :status="status" :stroke-width="8" :show-text="false" />

    <div class="progress-info">
      <div class="progress-text">
        <span>{{ progressText }}</span>
        <span class="progress-percentage">{{ percentage.toFixed(1) }}%</span>
      </div>

      <div class="progress-details" v-if="showDetails">
        <div class="detail-item">
          <span class="label">当前文件:</span>
          <span class="value">{{ currentFile || '准备中...' }}</span>
        </div>
        <div class="detail-item" v-if="speed">
          <span class="label">处理速度:</span>
          <span class="value">{{ formatSpeed(speed) }}</span>
        </div>
        <div class="detail-item" v-if="eta">
          <span class="label">预计剩余:</span>
          <span class="value">{{ formatDuration(eta) }}</span>
        </div>
        <div class="detail-item">
          <span class="label">进度:</span>
          <span class="value">{{ completed }} / {{ total }}</span>
        </div>
      </div>
    </div>

    <div class="progress-stats" v-if="showStats">
      <el-tag type="success" size="small" v-if="successCount > 0">
        成功: {{ successCount }}
      </el-tag>
      <el-tag type="danger" size="small" v-if="failedCount > 0">
        失败: {{ failedCount }}
      </el-tag>
      <el-tag type="info" size="small" v-if="elapsedTime && elapsedTime > 0">
        已用时: {{ formatDuration(elapsedTime || 0) }}
      </el-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Loading, Close } from '@element-plus/icons-vue'

interface Props {
  percentage: number
  title?: string
  currentFile?: string
  completed?: number
  total?: number
  successCount?: number
  failedCount?: number
  speed?: number // bytes per second
  eta?: number // estimated time remaining in ms
  elapsedTime?: number // elapsed time in ms
  showCancel?: boolean
  showDetails?: boolean
  showStats?: boolean
  status?: 'success' | 'exception' | 'warning' | undefined
}

interface Emits {
  (e: 'cancel'): void
}

const props = withDefaults(defineProps<Props>(), {
  title: '恢复进行中',
  completed: 0,
  total: 0,
  successCount: 0,
  failedCount: 0,
  showCancel: true,
  showDetails: true,
  showStats: true
})

defineEmits<Emits>()

const progressText = computed(() => {
  if (props.total > 0) {
    return `正在处理第 ${props.completed + 1} 个文件，共 ${props.total} 个`
  }
  return '正在处理...'
})

const formatSpeed = (bytesPerSecond: number): string => {
  const units = ['B/s', 'KB/s', 'MB/s', 'GB/s']
  let unitIndex = 0
  let speed = bytesPerSecond

  while (speed >= 1024 && unitIndex < units.length - 1) {
    speed /= 1024
    unitIndex++
  }

  return `${speed.toFixed(1)} ${units[unitIndex]}`
}

const formatDuration = (ms: number): string => {
  if (ms < 1000) return `${ms}ms`
  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
  if (ms < 3600000) return `${(ms / 60000).toFixed(1)}m`
  return `${(ms / 3600000).toFixed(1)}h`
}
</script>

<style scoped>
.recovery-progress {
  padding: 16px;
  background-color: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.progress-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.progress-title .el-icon {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.progress-info {
  margin-top: 12px;
}

.progress-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--el-text-color-regular);
  margin-bottom: 8px;
}

.progress-percentage {
  font-weight: 600;
  color: var(--el-color-primary);
}

.progress-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.label {
  color: var(--el-text-color-regular);
}

.value {
  color: var(--el-text-color-primary);
  font-family: monospace;
}

.progress-stats {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--el-border-color-lighter);
}
</style>